<template>

  <div id="menu" v-if="isShow">
    <div class="content">{{isShow}}</div>
    <div class="content">功能1</div>
    <div class="content">功能2</div>
    <div class="content">功能3</div>
    <div class="content">功能4</div>
    <div class="content">功能5</div>
  </div>

</template>


<script setup>

import {useContentMenuStore} from '@/components/contextMenu/contentMenuStore.js'
import {computed, onMounted, watch} from "vue";

const {isOpen, isShow, position } = useContentMenuStore()


defineProps({
  menuDate: {
    type:Array,
    default() {
      return [{name: '刷新', action: 'flash',}];
    },
  }
})



watch(position,()=>{
  let t = position.height + 'px'
  let l = position.width + 'px'
  // console.log(t,l)
  let menu = document.querySelector("#menu");
  //根据事件对象中鼠标点击的位置，进行定位
  menu.style.top = t;
  menu.style.left = l;
})


</script>

<style scoped>

#menu {
  position: absolute;
  width: 100px;
  height: auto;

  .content {
    height: 20px;
    background-color: #6c6c6c;
  }
}

</style>
